<template>
  <div class="herd_dex">
    <div class="herd_bud"></div>
    <div class="herd_bt">
      订单评审
      <div class="btn1">
        <el-button type="info" onclick="window.history.go(-1)" icon="el-icon-back">返回</el-button>
      </div>
    </div>
    <div class="jd">
       <el-steps :active="4" align-center class="step">
          <el-step title="合同信息" description="2019.06.11  09：50"></el-step>
          <el-step title="物料信息" description="2019.06.11  09：50"></el-step>
          <el-step title="物料信息" description="2019.06.11  09：50"></el-step>
          <el-step title="付款信息" description="2019.06.11  09：50"></el-step>
            <el-step title="附件合同上穿" description="2019.06.11  09：50"></el-step>
        </el-steps>
    </div>
    <div class="herd_tow_brg">
      <div class="herd_xh">1</div>
      <div class="herd_tow_bt">合同信息</div>
      <p class="Purchase_Division"></p>
      <div class="hd">
        <el-row :gutter="32">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="130px">
                <el-form-item label="合同批号">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="130px">
                <el-form-item label="销售订单号">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="130px">
                <el-form-item label="订单类型">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="130px">
                <el-form-item label="计划交货日期">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="130px">
                <el-form-item label="计划收货日期">
                  <el-input v-model="formInline.bianhao" placeholder="2019-8-8" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="130px">
                <el-form-item label="计划收货日期">
                  <el-input v-model="formInline.bianhao" placeholder="2019-9-9" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="130px">
                <el-form-item label="销售编号">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="130px">
                <el-form-item label="签单人员">
                  <el-input v-model="formInline.bianhao" placeholder="王大海" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--  -->
    <div class="herd_for_brg">
      <div class="herd_xh">3</div>
      <div class="herd_tow_bt">物料信息</div>
      <p class="Purchase_Division"></p>
      <el-table class="from_tab" :data="tableData">
        <el-table-column prop label="序号" align="center"></el-table-column>
        <el-table-column prop label="物料名称" align="center">
          <input class="tab_ipt" type="text /" />
        </el-table-column>
        <el-table-column prop label="类型型号" align="center">
          <input class="tab_ipt" type="text /" />
        </el-table-column>
        <el-table-column prop label="单位" align="center">
          <input class="tab_ipt1" type="text" />
        </el-table-column>
        <input class="tab_ipt1" type="text" />
        <el-table-column prop label="数量" align="center">
          <input class="tab_ipt1" type="text" />
        </el-table-column>
        <el-table-column prop label="单价(元)" align="center">
          <input class="tab_ipt1" type="text" />
        </el-table-column>
        <el-table-column prop label="小计(元)" align="center">
          <input class="tab_ipt1" type="text" />
        </el-table-column>
        <el-table-column prop label="计划交货日期" align="center">
          <input class="tab_ipt" type="text /" />
        </el-table-column>
        <el-table-column prop label="订单日期" align="center">
          <input class="tab_ipt" type="text /" />
        </el-table-column>
        <el-table-column prop label="税码" align="center">
          <el-select placeholder=" "></el-select>
        </el-table-column>
      </el-table>
    </div>
    <!--  -->
    <div class="herd_five_brg">
      <div class="herd_xh">4</div>
      <div class="herd_tow_bt">付款信息</div>
      <p class="Purchase_Division"></p>
      <div class="five_dex">
         <el-row :gutter="24">
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="80px">
                <el-form-item label="企业名称">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="80px">
                <el-form-item label="收货地址">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="70px">
                <el-form-item label="联系人">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="75px">
                <el-form-item label="联系方式">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-form :model="formInline" class="demo-form-inline" label-width="70px">
                <el-form-item label="邮政编码">
                  <el-input v-model="formInline.bianhao" placeholder="TT-7996" readonly="readonly"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
         </el-row>
      </div>
    </div>
    <!--  -->
    <div class="herd_six_brg">
      <div class="herd_xh">5</div>
       <div class="herd_tow_bts">附件及合同上传</div>
      <p class="Purchase_Division"></p>
      <div class="six_ph_dex">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span class="six_zt">订单表格</span>
      </div>
      <div class="six_ph_dex1">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span class="six_zt">车身颜色</span>
      </div>
      <div class="six_ph_dex2">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span class="six_zt">其他图纸</span>
      </div>
    </div>
  </div>
</template>

<script>
import daohanganniu from "../../components/daoHangAnNiu.vue";
export default {
  components: {
    daohangNav: daohanganniu
  },
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 75;
    }
  },
  data() {
    return {
      formInline: {},
      active: 0,
      tableData: [{}]
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
//一级头
.herd_bud {
  margin-top: 20px;
  margin-left: 20px;
  height: 20px;
  width: 5px;
   background-color: rgb(52, 144, 231);
}
.herd_dex {
  height: 500px;
}
.herd_bt {
  margin-top: -20px;
  margin-left: 30px;
}

.btn_f {
  width: 100px;
}
.btn1 {
  margin-top: -30px;
  margin-left: 92%;
}
//二级头
.herd_tow_brg {
  height: 170px;
  width: 98%;
  background-color: $white;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.herd_three_brg {
  height: 120px;
  width: 98%;
  background-color: $white;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.herd_for_brg {
  height: 170px;
  width: 98%;
  background-color: $white;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.herd_five_brg {
  height: 25%;
  width: 98%;
  background-color: $white;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.five_dex {
  margin-top: 10px;
}
.herd_six_brg {
  height: 140px;
  width: 98%;
  background-color: $white;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.herd_xh {
  height: 28px;
  width: 30px;
  border-radius: 30px;
  border: 1px solid $linecolor;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
  margin-left: 20px;
  color: $linecolor;
}
.herd_tow_bt {
  font-size: $font-size-medium;
  font-weight: bold;
  line-height: 40px;
  margin-left: 60px;
  margin-top: -35px;
  color: $lightgrey;
}
.herd_tow_bts {
  font-size: $font-size-medium;
  font-weight: bold;
  line-height: 40px;
  margin-left: 60px;
  margin-top: -33px;
  color: $lightgrey;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
  width: 98%;
  margin-left: 10px;
}
//一级渲染
.hd {
  height: 35%;
  margin-top: 10px;
}
.hd_bt {
  font-size: $font-size-small;
  margin-left: 40px;
}
.hd_bt1 {
  font-size: $font-size-small;
  margin-left: 10px;
  margin-left: 50px;
}
.hd_bta {
  font-size: $font-size-small;
  margin-left: 10px;
  margin-left: 30px;
}

.hd_bt2 {
  font-size: $font-size-small;
  margin-left: 10px;
  margin-left: 40px;
}
.hd_bts {
  font-size: $font-size-small;
  margin-left: 10px;
  margin-left: 60px;
}
.hd_btsa {
  font-size: $font-size-small;
  margin-left: 10px;
  margin-left: 52px;
}
.ipt_wbta {
  height: 35px;
  width: 10%;
  border: none;
  border: 1px solid $linecolor;
  border-radius: 5px;
  padding-left: 10px;
  text-align: center;
}
.ipt_wbtas {
  height: 35px;
  width: 15%;
  border: none;
  border: 1px solid $linecolor;
  border-radius: 5px;
  padding-left: 10px;
  text-align: center;
}
.tab_ipt {
  height: 40px;
  width: 100px;
  border-radius: 3px;
  border: none;
  border: 1px solid $linecolor;
  padding-left:5px;
}
.tab_ipt1 {
  height: 40px;
  width: 80px;
  border-radius: 3px;
  border: none;
  border: 1px solid $linecolor;
  padding-left:5px;
}
.el-input__inner {
  width: 80px;
  line-height: 30px;
}

.hd_tow {
  margin-top: 20px;
}
.hd_btg {
  font-size: $font-size-small;
  margin-left: 5px;
}
.six_ph_dex {
  widows: 80%;
}
.six_ph_dex1 {
  margin-left: 80px;
  margin-top: -80px;
}
.six_ph_dex2 {
  margin-left: 160px;
  margin-top: -78px;
}
//上传图
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 15px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin-left: 10px;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
.six_zt {
  font-size: $font-size-small-s;
  margin-left: 20px;
}
.jd {
  margin-left: 18px;
  height: 80px;
  width: 97%;
}
.step {
  width: 80%;
  margin-left: 8%;
}
</style>